<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700"
    :destroy-on-close="true">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
            {{ isEdit == 'CREATE' ? '新建' : '编辑' }}广告
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false" />
        </div>
      </div>
      <div class="drawer_content">
        <div class="content-box">
          <div class="label">广告标题:</div>
          <div class="desc">
            <el-input placeholder="请输入广告标题" v-model="form.title" clearable>
            </el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">广告类型:</div>
          <div class="desc">
            <el-radio v-for="item in typeList" :key="item" v-model="form.type" :label="item.ID">{{ item.Name
              }}</el-radio>
          </div>
        </div>
        <div class="content-box">
          <div class="label">排序:</div>
          <div class="desc">
            <el-input-number size="mini" v-model="form.sort"></el-input-number>
          </div>
        </div>
        <div class="content-box">
          <div class="label">广告图片:</div>
          <div class="desc">
            <div class="tips">附图可上传1张图片，图片不超过512KB，仅支持jpg、png格式</div>
            <imgUplode :list="form.fileList" @imgList="getImgsUrl" :octopus="octopus" num="1">
            </imgUplode>
          </div>
        </div>
        <div class="content-box">
          <div class="label">跳转地址:</div>
          <div class="desc">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入小程序页面地址"
              v-model="form.ChainedAddress">
            </el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">投放时间:</div>
          <div class="desc">
            <el-date-picker v-model="form.starttime" type="datetime" placeholder="选择投放开始日期时间">
            </el-date-picker>
            <span style="padding: 0 10px;">至</span>
            <el-date-picker v-model="form.endtime" type="datetime" placeholder="选择投放结束日期时间">
            </el-date-picker>
          </div>
        </div>
        <!-- <div class="content-box">
          <div class="label">启/停用</div>
          <div class="desc">
            <el-radio v-model="form.state" :label="item.ID" v-for="item in statusList" :key="item">{{ item.Name
              }}</el-radio>
          </div>
        </div> -->
      </div>
      <div>
        <div class="button_list">
          <button style="background-color: #1E1B19;" @click="save(0)">  暂存 </button>
          <button @click="save(1)">发布</button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import imgUplode from '@/components/Components/imgUpdate.vue'
export default {
  name: "cat_dialog",
  props: {
    messageList: {
      type: Object,
      default: {},
    },
  },
  components: {
    imgUplode,
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      detail: [],
      isEdit: 'look',
      typeList: [],
      statusList: [],
      form: {
        title: '',
        type: 1,
        sort: 1,
        state: "1",
        fileList: [],
        updateFile: [],
        ChainedAddress: '',
        starttime: '',
        endtime: ''
      },
      rules: {
        title: { required: true, message: "请填广告标题" },
        fileList: { required: true, message: "请上传一张广告图片" },
        ChainedAddress: { required: true, message: "请填写跳转地址" },
        starttime: { required: true, message: "请选择广告投放开始时间" },
        endtime: { required: true, message: "请选择广告投放结束时间" },
      }
    };
  },
  created() {
    this.init()
  },
  computed: {

  },
  watch: {
    drawer: {
      handler(v) {
        if (v) {
          // this.getDriverInfo()
        }
      }
    }
  },
  methods: {
    async init() {
      await this.api_1267();
      await this.api_1269();
    },
    // 获取广告类型
    api_1267() {
      return new Promise((resolve, reject) => {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1267,
            cellData: [
              { name: "ID" },	// ID
              { name: "Name" },	// Name
              { name: "ParentkeyValue" },	// ParentkeyValue
            ],
            paramData: {

            }
          },
          (data) => {
            if (data.status.code == 200) {
              this.typeList = data.content.queryData;
              resolve()
            } else {
              this.octopus.tips.error(data);
            }
          });
      })

    },
    // 获取广告状态
    api_1269() {
      return new Promise((resolve, reject) => {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1269,
            cellData: [
              { name: "ID" },	// ID
              { name: "Name" },	// Name
              { name: "ParentkeyValue" },	// ParentkeyValue
            ],
            paramData: {

            }
          },
          (data) => {
            if (data.status.code == 200) {
              this.statusList = data.content.queryData;
              resolve()
            } else {
              this.octopus.tips.error(data);
            }
          });
      })
    },
    save(status = 1) {
      this.form.starttime = this.form.starttime != '' ? this.format(this.form.starttime) : '';
      this.form.endtime = this.form.endtime != '' ? this.format(this.form.endtime) : '';

      if (!this.octopus.tools.verify(this.form, this.rules)) {
        return
      }
      this.$confirm(`确定${status  ? '发布' : '暂存'}这个广告吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning'
        center: true
      }).then(res => {
        this.update_api_1265(status);
      }).catch(() => {
        console.log('取消了');
      })

    },
    getImgsUrl(fileList) {
      this.$set(this.form.fileList, 0, fileList[0])
    },
    drawerOp(list = null, type) {
      this.isEdit = type;
      this.drawer = true;
      if (list) {
        this.form.title = list.Name
        this.form.starttime = list.StartTime
        this.form.endtime = list.EndTime
        this.form.ChainedAddress = list.LinkUrl
        this.form.sort = list.Sort
        // this.form.state = this.statusList.find(x => x.ID == list.Status).ID
        this.form.type = this.typeList.find(x => x.ID == list.TypeID).ID
        this.form.fileList = list.PictureUrl && JSON.parse(list.PictureUrl);
        this.form.ID = list.ID;
      } else {
        this.form.title = ''
        this.form.starttime = ''
        this.form.endtime = ''
        this.form.ChainedAddress = ''
        this.form.sort = 1
        // this.form.state = 1
        this.form.type = 1
        this.form.fileList = [];
        this.form.ID = '';
      }
    },
    update_api_1265(status = 1) {
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1265,
          type: this.isEdit,
          value: this.isEdit == 'CREATE' ? '' : this.form.ID,
          cellData: [
            { name: "Name", defaultValue: this.form.title },	// 标题
            { name: "PictureUrl", defaultValue: JSON.stringify(this.form.fileList) },	// 图片URL
            { name: "TypeID", defaultValue: this.form.type },	// 类型
            { name: "StartTime", defaultValue: this.form.starttime },	// 开始时间
            { name: "EndTime", defaultValue: this.form.endtime },	// 结束时间
            { name: "LinkUrl", defaultValue: this.form.ChainedAddress },	// 图片跳转地址
            { name: "Sort", defaultValue: this.form.sort },	// 排行优先级
            { name: "Status", defaultValue: status },	// 状态
            { name: "CreateUserID", defaultValue: this.octopus.passport.id },	// 修改人
            { name: "UpdateTime", defaultValue: new Date().toJSON().substring(0, 10) + ' ' + new Date().toTimeString().substring(0, 8) },	// 修改时间
          ],
          paramData: {

          }
        },
        (data) => {
          if (data.status.code == 200) {
            this.drawer = false;
            this.octopus.tips.success('操作成功。')
            this.$emit('reload')
          } else {
            this.octopus.tips.error(data);
          }
        });
    },

    // 格式化时间
    format(time, format = 'yyyy-mm-dd hh:ii:ss') {
      let t = ''
      let f = ''
      if (Object.prototype.toString.call(time) === '[object Object]') {
        t = time.time
        f = time.format || 'yyyy-mm-dd hh:ii:ss'
      } else {
        t = time
        f = format
      }
      const d = new Date(t)
      const formatObj = {
        y: d.getFullYear(),
        m: d.getMonth() + 1,
        d: d.getDate(),
        h: d.getHours(),
        i: d.getMinutes(),
        s: d.getSeconds(),
        z: d.getMilliseconds(),
      }
      return f.toLowerCase()
        .replace(/([ymdhisaz])+/g, (result, key) => {
          const value = formatObj[key].toString()
          if (key === 'y') {
            return value.substr(
              value.length - result.length > 0 &&
              value.length - result.length
            )
          }
          return value.padStart(result.length, '0')
        })
    }
  },
};
</script>
<style scoped>
.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #F78C53;
  cursor: pointer;
}

.tips {
  margin-bottom: 20px;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
  padding-left: 2px;
}

>>>.el-radio__input.is-checked+.el-radio__label {
  color: #F87338;
}

>>>.el-radio__input.is-checked .el-radio__inner {
  border-color: #F87338;
  background: #F87338;
}
</style>